<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>中长期画像</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="icon" href="favicon.ico">
		<link rel="stylesheet" href="../../assets/css/main.css">
	</head>
	<script type="text/javascript" src="../../js/libs/jquery.min.js "></script>
	<script type="text/javascript" src="../../js/libs/layui/layui.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/vue.js"></script>
	<script type="text/javascript" src="../../js/libs/vue/axios.min.js"></script>
	<script type="text/javascript" src="../../js/main.js"></script>
	<script type="text/javascript" src="../../js/utils.js"></script>
	<script type="text/javascript" src="../../js/libs/echarts/echarts.min.js"></script>
	<body>
		<div id="demo" style="width: 100%;height:400px;"></div>
	</body>
	<script>
		var tooltipMap = {
			"2006年": {
				lp: "安徽省",
				mp: "河北省",
				target: "农业GDP",
				years: ["1990年", "2005年", "2015年"],
				data: [0.68, 1.07, 1.56]
			},
			"2010年": {
				lp: "安徽省",
				mp: "河北省",
				target: "农业GDP",
				years: ["1990年", "2005年", "2015年"],
				data: [0.68, 1.07, 1.56]
			},
			"2015年": {
				lp: "安徽省",
				mp: "河北省",
				target: "农业GDP",
				years: ["1990年", "2005年", "2015年"],
				data: [0.68, 1.07, 1.56]
			},
			"2020年": {
				lp: "安徽省",
				mp: "河北省",
				target: "农业GDP",
				years: ["1990年", "2005年", "2015年"],
				data: [0.68, 1.07, 1.56]
			}
		}
		
		var legend = [];
		var xAxis = [];
		var series = [];
		axios.get("http://192.168.1.150:8083/zcq/data").then(res =>{
			console.log(res);
			tooltipMap = res.data.tooltipMap;
			legend = res.data.legend;
			xAxis = res.data.xAxis;
			series = res.data.series;
			init();
		})
		
		function init() {
			var demo = echarts.init(document.getElementById('demo'));
			var colors = ['#5793f3', '#d14a61', '#675bba'];
			

			option = {
				color: colors,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					},
					backgroundColor: "green",
					position: function(point, params, dom, rect, size) {
						// 固定在顶部
						return [point[0], '10%']
					},
					formatter: function(a, b, c, d) {
						var label = '';
						if (a.length == 2) {
							var yearp = a[0].axisValue;
							var year = a[0].axisValue.substr(0, yearp.length - 1);
							var oldYear = year - 4;
							var qj = a[1].axisValue;
							var zzl = a[1].data;
							var datas = {}
							Object.keys(tooltipMap).forEach(function(index) {
								if (index == yearp) {
									datas = tooltipMap[index]
								}
							})
							if (datas.years) {
								label += '<div style="width: 300px; height:120px;">'
								label += '<h4>' + oldYear + '~' + year + qj + ':</h4>'
								label += '<div style="width: 300px;word-break: break-all;word-wrap: break-word;">&nbsp;&nbsp;&nbsp;&nbsp;' +
									datas.mp + datas.target + datas.lp + '超过（在此期间' + datas.lp + '</br>增长率为' + zzl + '%)</div>'
								label += '<div style="width: 300px;word-break: break-all;word-wrap: break-word;">&nbsp;&nbsp;&nbsp;&nbsp;';
								for (i = 0; i < datas.years.length; i++) {
									var years = datas.years;
									var data = datas.data;
									label += datas.lp + years[i] + datas.target + '相当于' + data[i] + '个' + datas.mp + ',</br>';
								}
								label = label.substr(0, label.length - 6);
								label += '</div>'
								label += '</div>'
							}
						}
						return label
					}
				},
				grid: {
					right: '20%'
				},
				toolbox: {
					feature: {
						dataView: {
							show: true,
							readOnly: false
						},
						restore: {
							show: true
						},
						saveAsImage: {
							show: true
						}
					}
				},
				legend: {
					data: ['增长率', '人口']
				},
				xAxis: [{
						name: "人口",
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						boundaryGap: false,
						data: xAxis[0].data
					},
					{
						name: "year",
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						boundaryGap: ['40%', 0],
						data: xAxis[1].data,
						position: "bottom",
						offset: 20,
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						}
					}
				],
				yAxis: [{
						type: 'value',
						name: '增长率',
						min: 0,
						max: 250,
						position: 'right',
						axisLine: {
							lineStyle: {
								color: colors[0]
							}
						},
						axisLabel: {
							formatter: '{value} %'
						}
					},
					{
						type: 'value',
						name: '人口',
						position: 'left',
						axisLine: {
							lineStyle: {
								color: colors[2]
							}
						},
						axisLabel: {
							formatter: '{value} 万人'
						}
					}
				],
				series: [{
						name: '增长率',
						type: 'bar',
						yAxisIndex: 0,
						xAxisIndex: 1,
						symbol: 'path://path://M10 600 Q 95 0 180 600',
						data: series[0].data,
						label: {
							normal: {
								position: 'insideTop',
								show: true,
								formatter: '{b}{a}:{c}%'
							}

						},
						barCategoryGap: '50%',
						barMinHeight: 20,
						itemStyle: {
							//柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
							emphasis: {
								barBorderRadius: 30
							},
							normal: {
								//柱形图圆角，初始化效果
								barBorderRadius: [10, 10, 10, 10],
								color: "green",
								label: {
									show: true, //是否展示
									textStyle: {
										fontWeight: 'bolder',
										fontSize: '12',
										fontFamily: '微软雅黑',
										color: "#000",
										align: "center"
									}
								}
							}
						}
					},
					{
						name: '人口',
						type: 'line',
						yAxisIndex: 1,
						data: series[1].data,
						itemStyle: {
							normal: {
								areaStyle: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
											offset: 0,
											color: 'green' // 0% 处的颜色
										}, {
											offset: 1,
											color: '#fff' // 100% 处的颜色
										}],
										global: false // 缺省为 false
									}
								}
							}
						}
					}
				]
			};
			demo.setOption(option);
		}
	</script>
</html>
